var initCourseTab = (function (doc, win) {
    var courseData = JSON.parse(doc.getElementById('js-course-data').innerHTML), //获取数据，并转成json对象
        cardItemTpl = doc.getElementById('js-card-item-tpl').innerHTML, // 模板
        oCouseCardList = doc.getElementsByClassName('couse-card-list')[0], //获取课程列表ul
        oCourseTabLks = doc.getElementsByClassName('course-tab-lk'), //获取所有的tab选项卡的a标签
        oCourseTabLksLen = oCourseTabLks.length,
        oSearchInput = doc.getElementById('js-search-input'), //搜索框
        filterArr = courseData; //tab切换后筛选出来的数据

    return {
        //初始化，加载全部课程
        initCourseList: function () {
            oCouseCardList.innerHTML = this.renderList(courseData);
        },

        // 初始化列表，默认选择全部
        restoreList: function () {
            oCouseCardList.innerHTML = this.renderList(filterArr);
            //this.changeTabCurren(oCourseTabLks[0]); //tab选项卡-全部
        },

        //搜索课程
        searchCourse: function () {
            var inputVal = oSearchInput.value,
                inputLen = inputVal.length;
            if (inputLen > 0) {
                var data = this.searchData(filterArr, inputVal); //根据关键字匹配的课程列表数据        
                oCouseCardList.innerHTML = data && data.length > 0 ? this.renderList(data) : this.showTip('没有搜到相关课程');
            } else {
                //搜索关键字为空时，加载全部课程
                this.restoreList();
            }
        },

        //搜索关键字
        searchData: function (data, keyword) {
            console.log('data', data)
            return data.reduce(function (prev, elem) {
                var res = elem.course.indexOf(keyword);
                res !== -1 && prev.push(elem); //如果课程列表中包含关键字则添加到prev中
                return prev;
            }, [])
        },

        //列表为空提示
        showTip: function (text) {
            return '<div class="course-list-tip"><span>' + text + '</span></div>'
        },

        //tab切换事件
        tabClick: function (e) {
            var e = e || window.event,
                tar = e.target || e.srcElement,
                className = tar.className,
                item;

            if (className === 'course-tab-lk') {
                var field = tar.getAttribute('data-field');
                this.changeTabCurren(tar);
                filterArr = this.filterData(field, courseData);
                oCouseCardList.innerHTML = this.renderList(filterArr);
            }
        },

        //数据筛选
        filterData: function (field, data) {
            if (field === 'all') {
                return data;
            }
            return data.filter(function (elem) {
                switch (field) {
                    case 'free':
                        return elem.is_free === '1';
                        break;
                    case 'vip':
                        return elem.is_free === '0';
                        break;
                }
            })
        },

        //列表渲染
        renderList: function (data) {
            var list = '';
            data.forEach(function (elem) {
                list += cardItemTpl.replace(/{{(.*?)}}/g, function (node, key) {
                    return {
                        img: elem.img,
                        courseName: elem.course,
                        isFree: elem.is_free === '1' ? 'free' : 'vip',
                        price: elem.is_free === '1' ? '免费' : ("￥" + Number(elem.price).toFixed(2)),
                        hours: elem.classes
                    } [key];
                });
            });
            return list;
        },

        //改变当前tab选项卡的状态
        changeTabCurren: function (currentDom) {
            //遍历tab选项卡a
            for (var i = 0; i < oCourseTabLksLen; i++) {
                item = oCourseTabLks[i];
                item.className = 'course-tab-lk';
            }
            currentDom.className += ' current'; //当前切换的tab选项卡加上类名current
        }


    }
})(document, window);

;
(function (doc) {
    var oSearchInput = doc.getElementById('js-search-input'),
        oTabList = doc.getElementsByClassName('course-tab-list')[0];

    var init = function () {
        initCourseTab.initCourseList(); //初始化，加载全部课程
        bindEvent();
    }

    function bindEvent() {
        //input搜索框搜索事件
        oSearchInput.addEventListener('input', initCourseTab.searchCourse.bind(initCourseTab), false);

        //tab切换事件
        oTabList.addEventListener('click', initCourseTab.tabClick.bind(initCourseTab), false);
    }
    init();
})(document);